<script setup>
  const props = defineProps({
    title: ''
  })
  const $parent = inject('$parent')
  const flag = ref(false)

  function show() {
    flag.value = true
  }

  function hide() {
    flag.value = false
  }

  $parent.addChild({
    title: props.title,
    show,
    hide
  })
</script>

<template>
  <div class="p-2" v-if="flag">
    <slot />
  </div>
</template>